<template>
	<view class="train-details">
		<bsNavBar :title='course.courseTitle'></bsNavBar>
		<u-image :fade="true" duration="450" width="100%" height="240rpx" :src="course.detailImage"></u-image>
		<view class="title">
			{{course.courseTitle}}
		</view>
		<bs-gap top="0" bottom="26"></bs-gap>
		<u-sticky :offset-top='navHeight'>
			<view class="">
				<u-tabs class='tods' active-color='#0050A5' inactive-color='#9A9A9A' :list="list" :is-scroll="false" :current="current"
				 @change="change"></u-tabs>
			</view>

		</u-sticky>

		<view class="mt-10 mb-60">
			<bs-line></bs-line>
		</view>
		<view class="tranin-padding">
			<view id="bsTileRich">
				<bsTileRich title='课程介绍' :content='course.courseIntroduction'>
				</bsTileRich>
			</view>
			<!-- //开通流程 -->
			<view id="flow">
				<flow :course='course'></flow>
			</view>
			<!-- //学习进度 -->
			<view id='schedule'>
				<schedule :course='course' :list='studyPlanList'></schedule>
			</view>
			<!-- //证书领取 -->
			<view id="getBook">
				<getBook :isAddress='isAddress' :isBook='isBook'></getBook>
			</view>
			<!-- //开通课程 -->
			<view class="open">
				<openCourse :isBook='isBook' :courseId='course.courseId' :isOpenCourse='isOpenCourse'></openCourse>
			</view>
		</view>
	</view>
</template>

<script>
	import bsTileRich from '@/components/bs-title-rich/bs-title-rich.vue'
	import title from '@/components/bs-title/bs-title.vue'
	import flow from './components/flow.vue'
	import schedule from './components/schedule.vue'
	import getBook from './components/getBook.vue'
	import openCourse from './components/openCourse.vue'
	import {
		domScroll
	} from "@/utils/tools.js"
	export default {
		components: {
			bsTileRich,
			title,
			flow,
			schedule,
			getBook,
			openCourse

		},
		data() {
			return {
				list: [{
					name: '课程介绍'
				}, {
					name: '报名流程'
				}, {
					name: '学习进度'
				}, {
					name: '证书领取'
				}],
				current: 0,
				navHeight: this.CustomBar * 2,
				courseId: '',
				course: {},
				studyPlanList: [],
				isOpenCourse: false,
				isBook: false,
				isAddress: null
			};
		},
		async onLoad(e) {
			this.courseId = e.courseId
			await this.init()
		},
		mounted() {
			let _this = this
		},
		methods: {
			async init() {
				//获取课程详情
				let details = await this.$u.api.findCourseOne({
					courseId: this.courseId
				})
				this.course = details.course
				//查询学习进度
				let studyPlan = await this.$u.api.findCourseProgressList({
					courseId: this.courseId
				})
				this.studyPlanList = studyPlan
				let isOpenCourse = await this.$u.api.verificationIsOpenCourse({
					courseId: this.courseId
				})
				this.isOpenCourse = isOpenCourse
				//查询是否有证书
				let isBook = await this.$u.api.isGeneratorCertificate({
					courseId: this.courseId
				})
				this.isBook = isBook

				//查询是否有证书邮寄地址
				let isAddress = await this.$u.api.findMailingAddress({
					courseId: this.courseId
				})
				this.isAddress = isAddress
				console.log(this.isBook, '是否有邮寄地址')
			},
			async getStudyPlan() {
				//查询学习进度
				let studyPlan = await this.$u.api.findCourseProgressList({
					courseId: this.courseId
				})
				this.studyPlanList = studyPlan
			},
			change(index) {
				let idArr = ['#bsTileRich', '#flow', '#schedule', '#getBook']
				domScroll(idArr, index, this.navHeight, this)
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.train-details {
		padding-bottom: 180rpx;
		.tranin-padding {
			padding: 0 30rpx;
		}

		.title {
			font-size: 36rpx;
			color: $bs-color-title;
			margin: 40rpx 0;
			margin-left: 30rpx;
		}
	}
</style>
